<script lang="ts" setup>
import { defineProps, computed } from 'vue'

let props = defineProps({
  value: Number,
  theme: {type: String, default: 'orange'}
})
console.log(props)
let rate = computed(() => {
  return '★★★★★☆☆☆☆☆'.slice(5 - props.value, 10 - props.value)
})

const themeObj = {
  'black': '#000',
  'white': '#fff',
  'red': '#f5222d',
  'orange': '#fa541c',
  'yellow': '#fadb14',
  'green': '#52c41a',
  'blue': '#40a9ff',
  'purple': '#722ed1',
}

let fontStyle = computed(() => {
  return {
    color: themeObj[props.theme]
  }
})

</script>

<template>
  <div :style="fontStyle">
    {{ rate }}
  </div>
</template>

<style scoped>

</style>
